<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				取消
			</view>
			<view class="head_mid">
				动态
			</view>
			<view class="head_right">
				<!-- 发布 -->
			</view>
		</view>
		<view class="topCenter">
			<view @tap="selectMenu(index)" :class="{fontActive:index===menuIndex}" class="menu" :key=index v-for="(item,index) in titleData">{{item}}
				<view v-show="menuIndex===index" class="jingjiehead-active"></view>
			</view>
		</view>
		<view class="body" v-if="menuIndex===0">
			<textarea class="item" value="" placeholder="这一刻,想说点什么~" v-model="content" auto-height />
			<view class="Piclist">
				<view class="picBox" v-for="(item,index) in imgList" :key="index"  >
				<image class="" :src="item" mode="" @tap="previewImg(index)"></image><!-- @tap="previewImg(index)" -->
				<image class="delete" src="/static/index/delete.png" mode="" @tap="deletPic(index)"></image>
				</view>
			<image class="tianjia" src="../../../static/diqiuquan/fabu2.png" mode="" @tap="getToken('conentImg')"></image>
			</view>
			
			
		</view>
		<view class="body" v-else-if="menuIndex===1">
			<textarea class="item" value="" placeholder="这一刻,想说点什么~" v-model="content" auto-height />
			<view class="Piclist">
				<image @tap="getToken('video')" v-if="videoLists==''" class="tianjia" src="../../../static/diqiuquan/fabu2.png" mode=""></image>
				<video v-else mode="center" poster="../../../static/diqiuquan/fabu2.png" class="showImg" :src="videoLists"></video>
			</view>
			
			
		</view>
		<view class="class-box">
			<view class="class-title">地球圈类别</view>
			<view class="flexBox">
				<view class="common-box" v-for="(item,index) in selectList" :key="index" :class="{active:menu2Index==index}"
				 @tap="selectClass(index,item.type)">{{item.type}}</view>
			</view>
		</view>
		<!-- <view class="body_bottom">
			<view class="body_bottom_item">
				<text>公开</text>
				<switch @change="changestatus" />
			</view>
		</view> -->
		<view class="agreement">
			发布地球圈即代表同意<text @tap="toWebview('share')">《Q陌分享发布协议》</text>
		</view>
		<view class="btn" @tap="setdata">
			发布
		</view>
	</view>
</template>

<script>
	import qiniu from "../../../common/qiniuUploader.js"

	export default {
		data() {
			return {
				formatIndex:1,
				content:'',
				imgList:[],
				imgList2:[],
				titleData:['图文','视频'],
				selectList:[],
				menuIndex:0,
				menu2Index:0,
				// status:false,
				// statusNum:1,
				covpic:[],
				index:0,//上传图片索引
				videoLists:'',
				oldimgList:[],
				width:'',//一张图时的图片宽度
				height:'',//一张图时的图片高度
				video_height:'',//视频宽度
				video_height:'',//视频高度
				video_duration:'',//视频时间
				coverMap1:'',//封面
				className:'其他',//类别
			};
		},
		onShow() {
			this.getList()
		},
		methods: {
			selectMenu(index) {
				this.menuIndex = index;
				// this.$emit('switchTab', index)
			},
			selectClass(index, name) {
				this.menu2Index = index;
				this.className = name;
			},
			getList() { //查询列表
				var data = {
					1: 1,
				};
				var me = this;
				this.myAjaxNew({
					model: 'news',
					controllerName: 'curiosityclassfiy',
					actionName: 'queryListPage',
					data: data,
					successBack: function(res) {
						console.log(res)
						me.selectList=res.data.data
					}
				})
			},
			// #ifdef APP-PLUS
			getToken(type){
				if(this.imgList.length>=9){
					uni.showToast({
						title:'最多上传9张',
						icon:'none'
					})
					return
				}
				var me=this
				if(type=='conentImg'){
					me.appselectImg()
				}else if(type=='video'){
					var me = this;
					var data = {
						key: null,
					}
					this.myAjaxNewPost({
						model: 'push',
						controllerName: 'upload',
						actionName: 'getToken',
						data: data,
						successBack: function(res) {
								
							me.token = res.data.data
							console.log(me.token)
							if (me.token != '') {
								me.chooseVideo()
							}
						}
					})
				}
			},
			// #endif
			
			// #ifdef MP-WEIXIN
			getToken(type) {
				if(this.imgList.length>=9){
					uni.showToast({
						title:'最多上传9张',
						icon:'none'
					})
					return
				}
				var me = this;
				var data = {
					key: null,
				}
				this.myAjaxNewPost({
					model: 'push',
					controllerName: 'upload',
					actionName: 'getToken',
					data: data,
					successBack: function(res) {
			
						me.token = res.data.data
						console.log(me.token)
						if (me.token != '') {
							if(type=='conentImg'){
								me.selectImg()
							}else if(type=='video'){
								me.chooseVideo()
							}
						}
					}
				})
			},
			// #endif
			appselectImg(){
				var me = this;
				uni.showActionSheet({
					itemList: ['拍照', '相册'],
					itemColor: '#008AFF',
					success: function(res) {
						var index = res.tapIndex;
						if (index == 1) {
							uni.chooseImage({
								count: 1,
								sizeType: ['compressed'],
								sourceType: ['album'],
								success: function(res) {
									// me.card_front = res.tempFilePaths[0];
									var filePath = res.tempFilePaths[0];
									 me.oldimgList.push(filePath)
									if(me.oldimgList.length==1){
										uni.getImageInfo({
										src: res.tempFilePaths[0],
										success: function (image) {
											me.width=image.width;
											me.height=image.height;
										}
									})
									}
									uni.uploadFile({
										url: 'http://www.curiousmore.com:8768/eg-api/push/upload/uploadPicture',
										// url: 'http://192.168.101.14:8768/eg-api/push/upload/uploadPicture',
										filePath: filePath,
										name: 'file',
										formData: {
											'user_id': uni.getStorageSync('user_id'),
											'type': 'pic'
										},
										success: function(uploadFileRes) {
											// me.backImgArr.push(JSON.parse(uploadFileRes.data)[0]);
											console.log(JSON.parse(uploadFileRes.data)[0]);
											var imageURL = JSON.parse(uploadFileRes.data)[0];
											me.imgList=me.imgList.concat(imageURL)

										},
										fail: function(e) {
											uni.showToast({
												title: '图片上传失败，请重试',
												icon: 'none'
											})
											return;
										}
									});
								}
							});
						} else if (index == 0) {
							uni.chooseImage({
								count: 1,
								sizeType: ['compressed'],
								sourceType: ['camera'],
								success: function(res) {
									// me.card_front = res.tempFilePaths[0];
				
									var filePath = res.tempFilePaths[0];
									 me.oldimgList.push(filePath)
									if(me.oldimgList.length==1){
										uni.getImageInfo({
										src: res.tempFilePaths[0],
										success: function (image) {
											me.width=image.width;
											me.height=image.height;
										}
									})
									}
									uni.uploadFile({
										url: 'http://www.curiousmore.com:8768/eg-api/push/upload/uploadPicture',
										// url: 'http://192.168.101.14:8768/eg-api/push/upload/uploadPicture',
										filePath: filePath,
										name: 'file',
										formData: {
											'user_id': uni.getStorageSync('user_id'),
											'type': 'pic'
										},
										success: function(uploadFileRes) {
											// me.backImgArr.push(JSON.parse(uploadFileRes.data)[0]);
											console.log(JSON.parse(uploadFileRes.data)[0]);
											var imageURL = JSON.parse(uploadFileRes.data)[0];
											me.imgList=me.imgList.concat(imageURL)
									
										},
										fail: function(e) {
											uni.showToast({
												title: '图片上传失败，请重试',
												icon: 'none'
											})
											return;
										}
									});
								}
							});
						}
					}
				});
			},
			selectImg() { 
				var me = this;
				uni.showActionSheet({
					itemList: ['拍照', '相册'],
					itemColor: '#008AFF',
					success: function(res) {
						var index = res.tapIndex;
						if (index == 1) {
							uni.chooseImage({
								count: 1,
								sizeType: ['compressed'],
								sourceType: ['album'],
								success: function(res) {
									// me.card_front = res.tempFilePaths[0];
									var filePath = res.tempFilePaths[0];
									 me.oldimgList.push(filePath)
									if(me.oldimgList.length==1){
										uni.getImageInfo({
										src: res.tempFilePaths[0],
										success: function (image) {
											me.width=image.width;
											me.height=image.height;
										}
									})
									}
									// 交给七牛上传
									uni.showLoading({
											title: '上传中'
										}
									)
									if (me.token != '') {
										qiniu.upload(filePath, (res) => {
											console.log(res.imageURL)
											var imageURL = res.imageURL
											me.imgList=me.imgList.concat(imageURL)
							
											uni.hideLoading()
											console.log('file url is: ' + res.fileUrl);
										}, (error) => {
											console.log('error: ' + error);
										}, {
											region: 'ECN',
											domain: 'http://img.curiousmore.com', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
											key: null, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
											// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
											uptoken: me.token, // 由其他程序生成七牛 uptoken
											// uptokenURL: 'http://192.168.6.6:8768/eg-api/push/upload/getToken', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "[yourTokenString]"}
											// uptokenFunc: function() {
											// 	return '[yourTokenString]';
											// }
										}, (res) => {
											console.log('上传进度', res.progress)
											console.log('已经上传的数据长度', res.totalBytesSent)
											console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
											
										}, () => {
											// 取消上传
										}, () => {
											
											// `before` 上传前执行的操作
										}, (err) => {
											// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
											
										});
									}
								}
							});
						} else if (index == 0) {
							uni.chooseImage({
								count: 1,
								sizeType: ['compressed'],
								sourceType: ['camera'],
								success: function(res) {
									// me.card_front = res.tempFilePaths[0];

									var filePath = res.tempFilePaths[0];
									// 交给七牛上传
									uni.showLoading({
											title: '上传中'
										}
									)
									if (me.token != '') {
										qiniu.upload(filePath, (res) => {
											console.log(res.imageURL)
											var imageURL = res.imageURL
											me.imgList=me.imgList.concat(imageURL)
											uni.hideLoading()
											console.log('file url is: ' + res.fileUrl);
										}, (error) => {
											
											console.log('error: ' + error);
										}, {
											region: 'ECN',
											domain: 'http://img.curiousmore.com', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
											key: null, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
											// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
											uptoken: me.token, // 由其他程序生成七牛 uptoken
											// uptokenURL: 'http://192.168.6.6:8768/eg-api/push/upload/getToken', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "[yourTokenString]"}
											// uptokenFunc: function() {
											// 	return '[yourTokenString]';
											// }
										}, (res) => {
											console.log('上传进度', res.progress)
											console.log('已经上传的数据长度', res.totalBytesSent)
											console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
											
										}, () => {
											// 取消上传
										}, () => {
								
											// `before` 上传前执行的操作
										}, (err) => {
											// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
										});
									}
								}
							});
						}
					}
				});
			},
			chooseVideo() { //选择视频或拍摄
			
				uni.showActionSheet({
					itemList: ['相册', '拍摄'],
					success: (e) => {
						console.log(e)
						if (e.tapIndex == 0) { //从相册选择
							var me = this;
							uni.chooseVideo({ //拍摄
								count: 1,
								sourceType: ['album'],
								compressed: true, //是否压缩视频资源
								success: function(res) {
									console.log(res)
									// return
									me.video_height=res.height;
									me.video_width=res.width;
									me.video_duration=res.duration;//视频时间长度
									if (res.size > 52428800) { //控制上传视频大小
										uni.showToast({
											title:"请选择小于50M的视频!",
											icon:'none'
										})
										return
									} else {
										// me.videoLists = res.tempFilePath;
										var filePath = res.tempFilePath;
										console.log(filePath);
										// 交给七牛上传
										if (me.token != '') {
											uni.showLoading({
												title:'上传中'
											})
											qiniu.upload(filePath, (res) => {
												console.log(res.imageURL)
												me.videoLists = res.imageURL
												me.coverMap1=me.videoLists+'?vframe/jpg/offset/1'
												console.log(me.coverMap1,'封面')
												uni.hideLoading()
										
												console.log('file url is: ' + res.fileUrl);
											}, (error) => {
												uni.showToast({
													title: '上传失败',
													icon: null
												});
												var a = JSON.stringify(error);
												console.log('error: ' + a);
											}, {
												region: 'ECN',
												domain: 'http://img.curiousmore.com', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
												key: null, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
												// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
												uptoken: me.token, // 由其他程序生成七牛 uptoken
												// uptokenURL: 'http://192.168.6.6:8768/eg-api/push/upload/getToken', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "[yourTokenString]"}
												// uptokenFunc: function() {
												// 	return '[yourTokenString]';
												// }
											},(res) => {
											// console.log('上传进度', res.progress)
											// console.log('已经上传的数据长度', res.totalBytesSent)
											// console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
											
											
										}, () => {
											// 取消上传
										}, () => {
											
											// `before` 上传前执行的操作
										}, (err) => {
												// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
											});
										}
									}
									// console.log(me.videoLists)
								}
							});
						} else {
							var me = this;
							uni.chooseVideo({ //拍摄
								count: 1,
								maxDuration: 60, //拍摄时长限制
								sourceType: ['camera'],
								compressed: true, //是否压缩视频资源
								success: function(res) {
									console.log(res)
									// return
									me.video_height=res.height;
									me.video_width=res.width;
									me.video_duration=res.duration;//视频时间长度
									var filePath = res.tempFilePath;
									console.log(filePath);
									// 交给七牛上传
									if (me.token != '') {
										uni.showLoading({
											title:'上传中'
										})
										qiniu.upload(filePath, (res) => {
											console.log(res.imageURL)
											me.videoLists = res.imageURL
											me.coverMap1=me.videoLists+'?vframe/jpg/offset/1'
											console.log(me.coverMap1,'封面')
											uni.hideLoading()

											console.log('file url is: ' + res.fileUrl);
										}, (error) => {
											uni.showToast({
												title: '上传失败',
												icon: null
											});
											var a = JSON.stringify(error);
											console.log('error: ' + a);
										}, {
											region: 'ECN',
											domain: 'http://img.curiousmore.com', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
											key: null, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
											// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
											uptoken: me.token, // 由其他程序生成七牛 uptoken
											// uptokenURL: 'http://192.168.6.6:8768/eg-api/push/upload/getToken', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "[yourTokenString]"}
											// uptokenFunc: function() {
											// 	return '[yourTokenString]';
											// }
										}, (res) => {
											// console.log('上传进度', res.progress)
											// console.log('已经上传的数据长度', res.totalBytesSent)
											// console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
										}, () => {
											// 取消上传
										}, () => {
											// `before` 上传前执行的操作
										},  (err) => {
											// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
										});
									}
								}
							});
						}
					}
				})
			},
			setdata(){
				
				var nowCountry=uni.getStorageSync('nowCountry')
				var nowCity=uni.getStorageSync('nowCity')
				var me=this;
				if(this.menuIndex==0){
					if(this.content==""&&this.imgList.length==0){
						uni.showToast({
							title: '请输入内容',
							icon: 'none'
						})
						return;
					}
				this.imgList=this.imgList.join(',')
				// coverPics=coverPics.join(',')
				console.log(this.imgList)
				if(this.oldimgList.length==1){
					var data={
						user_id:uni.getStorageSync('user_id'),
						content:this.content,
						img_height:this.height,
						img_width:this.width,
						picts:this.imgList,
						// status:this.statusNum,
						location:nowCountry+nowCity,
						classfiy:this.className
					}
				}else{
					var data={
					user_id:uni.getStorageSync('user_id'),
					content:this.content,
					// style:this.formatIndex,
					// cover:coverPics,
					picts:this.imgList,
					// status:this.statusNum,
					location:nowCountry+nowCity,
					classfiy:this.className
				}
				}
				
				}else if(this.menuIndex==1){
					if(this.videoLists==""){
						uni.showToast({
							title:"请上传视频",
							icon:'none'
						})
						return
					}
					var data={
						user_id:uni.getStorageSync('user_id'),
						content:this.content,
						style:0,
						picts:this.videoLists,
						// status:this.statusNum,
						location:nowCountry+nowCity,
						img_height:this.video_height,
						img_width:this.video_width,
						video_duration:this.video_duration,//视频时间长度
						cover:this.coverMap1,
						classfiy:this.className
					}
				}
				
				this.myAjaxNewPost({
					model: 'message',
					controllerName: "noteUser",
					actionName: 'insert',
					data: data,
					successBack: function(res) {
						console.log(res)
						uni.navigateBack({
							delta:1
						})
						uni.showToast({
							title:'提交成功，请等待审核',
							icon:'none'
						})
					},
				})
			},
			// changestatus(){
			// 	if(this.status==false){
			// 		this.status=true
			// 		this.statusNum=1
			// 	}else{
			// 		this.status=false
			// 		this.statusNum=2
			// 	}
			// },
			deletPic(index){
				this.imgList.splice(index)
				this.oldimgList.splice(index)
			},
			previewImg(index) { // 预览图片
				var me = this;
				uni.previewImage({
					current: me.imgList[index], //显示当前点击图册
					urls: me.imgList,
				})
			},
			toWebview(type){
				uni.navigateTo({
					url: '../../../pages/Meet/newWebView/newWebView?type=' + type
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		},
	}
</script>

<style scoped>
.head {
		height: 162upx;
		display: flex;
		justify-content: space-between;
		font-size: 32upx;
		padding: 0 24upx;
		background: #ffffff;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 1000;
	}

	.head_left {
		color: #666666;
		padding-top: 90upx;
	}

	.head_mid {
		font-size: 36upx;
		color: #333333;
		padding-top: 90upx;
	}

	.head_right {
		width: 64upx;
	}
	.body{
		padding: 20upx 24upx;
		position: relative;
		/* margin-top: 148upx; */
	}
	.item{
		width: 100%;
		font-size: 26upx;
	}
	.Piclist image{
		width: 160upx;
		height: 160upx;
		margin-right: 15upx;
	}
	.Piclist{
		display: flex;
		padding-top: 150upx;
		flex-wrap: wrap;
	}
	.picBox{
		position: relative;
	}
	.Piclist .delete{
		width: 30upx;
		height: 30upx;
		position:absolute ;
		top: -8upx;
		right: -8upx;
	}
	.tianjia{
		width: 160upx;
		height: 160upx;

	}
	.body_bottom{
		width: 100%;
		margin-top: 40upx;
	}
	.body_bottom_item{
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0upx 24upx;
		height: 96upx;
		border-bottom: 1upx solid #E6E6E6;
		color: #333333;
		font-size: 32upx;
		/* position: absolute;
		top: 500upx; */
		
	}
	.body_bottom_item image{
		width: 18upx;
		height: 32upx;
	}
	.agreement{
		margin-top: 20upx;
		background: #FFFFFF;
		width: 100%;
		padding: 0 24upx;
		color:#999999 ;
		height:88upx ;
		line-height: 88upx;
		font-size: 30upx;
		box-sizing: border-box;
	}
	.agreement text{
		color: #47CECF;
	}
	
	.coverFormat {
		width: 100%;
		padding: 0 24upx;
		box-sizing: border-box;
	}
	
	.coverFormat-box {
		width: 100%;
	}
	
	.title-coverFormat {
		color: rgba(153, 153, 153, 1);
		font-size: 32upx;
		margin-top: 44upx;
	}
	
	.floatBox {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.flex-box {
		display: flex;
		align-items: center;
		width: 105upx;
		margin-top: 30upx;
		margin-right: 45upx;
	}
	
	.flex-box:nth-child(5) {
		margin-right: 0;
	}
	
	.check-img {
		width: 26upx;
		height: 26upx;
		margin-right: 15upx;
	}
	
	.format-img {
		width: 70upx;
		height: 40upx;
	}
	
	.preview-title {
		color: rgba(51, 51, 51, 1);
		font-size: 34upx;
		margin-top: 40upx;
		padding: 0 24upx;
		box-sizing: border-box;
	}
	
	.fengmian-box {
		width: 100%;
		padding: 0 24upx;
		box-sizing: border-box;
		padding-bottom: 50upx;
	}
	
	.fm-hidden-box {
		width: 100%;
		background-color: white;
	}
	
	.kind1 {
		width: 100%;
		height: 350upx;
		background: rgba(233, 247, 247, 1);
		border-radius: 10upx;
		position: relative;
		z-index: 1;
	}
	
	.kind1 image {
		width: 100%;
		height: 100%;
		border-radius: 10upx;
	}
	
	.fm-left-box {
		width: 519upx;
		height: 286upx;
		position: relative;
		z-index: 1;
		background: rgba(233, 247, 247, 1);
	}
	
	.fm-left-box image {
		width: 100%;
		height: 100%;
	}
	
	.fm-right-box {
		width: 182upx;
		height: 286upx;
		background: rgba(233, 247, 247, 1);
		position: relative;
		z-index: 1;
	}
	
	.fm-right-box image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.tips-title {
		width: 100%;
		text-align: center;
		line-height: 286upx;
		color: rgba(204, 204, 204, 1);
		font-size: 26upx;
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
	}
	
	.style {
		color: rgba(255, 255, 255, 1);
	}
	
	.average1 {
		line-height: 227.5upx;
	}
	
	.lingHeight {
		line-height: 350upx;
	}
	
	.tips-title.style {
		color: rgba(255, 255, 255, 1);
	}
	
	.tips-title.active {
		line-height: 169upx;
	}
	
	.marginTop {
		margin-top: 5upx;
	}
	
	.san-box-one {
		width: 232upx;
		height: 169upx;
		background: rgba(233, 247, 247, 1);
		position: relative;
		z-index: 1;
	}
	
	.san-box-one image {
		width: 100%;
		height: 100%;
	}
	.update-height {
		height: 350upx;
	}
	
	.update-width {
		width: 49.7%;
	}
	
	.update-width1 {
		width: 100%;
	}
	
	.average {
		height: 227.5upx;
	}
	
	.border-radius1 {
		border-radius: 10upx 0 0 10upx;
	}
	
	.border-radius2 {
		border-radius: 0 10upx 10upx 0;
	}
	
	.border-radius3 {
		border-radius: 10upx 10upx 0 0;
	}
	
	.border-radius4 {
		border-radius: 0upx 0upx 0upx 10upx;
	}
	
	.border-radius5 {
		border-radius: 0upx 0upx 10upx 0upx;
	}
	
	.border-radius6 {
		border-radius: 10upx 0upx 0upx 0upx;
	}
	
	.border-radius7 {
		border-radius: 0upx 10upx 0upx 0upx;
	}
	
	.update-height1 {
		height: 460upx;
	}
	
	.lingHeight1 {
		line-height: 460upx;
	}
	
	.right-box-san {
		width: 49.7%;
	}
	
	.update-width1 {
		width: 100%;
	}
	
	.lingHeight2 {
		line-height: 227.5upx;
	}
	.topCenter {
		width: 470upx;
		display: flex;
		height: 88upx;
		line-height: 88upx;
		
		padding: 0 24upx;
		padding-top: 182upx;
	}
	.menu {
		font-size: 30upx;
		color: #404a4c;
		margin-right: 40upx;
	}
	
	.menu.fontActive {
		color: #33cbcc;
	}
	
	.jingjiehead-active {
		width: auto;
		height: 7upx;
		background-color: #33cbcc;
		border-radius: 8upx 8upx 0upx 0upx;
		position: relative;
		top: -6upx;
	}
	.main{
		text-align: center;
		font-size: 28upx;
		border: 1upx solid #E6E6E6;
	}
	.showImg{
		height: 160upx;
		width: 160upx;
	}
	
	/* 类别 */
	.class-box {
		width: 100%;
		padding: 0 24upx;
		box-sizing: border-box;
		padding-top: 30upx;
		padding-bottom: 40upx;
	}
	
	.class-title {
		font-size: 28upx;
		color: rgba(153, 153, 153, 1);
	
	}
	
	.flexBox {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	
	
	.common-box {
		width: 140upx;
		height: 58upx;
		background: rgba(255, 255, 255, 1);
		border: 1upx solid rgba(230, 230, 230, 1);
		border-radius: 30upx;
		font-size: 26upx;
		color: rgba(102, 102, 102, 1);
		margin-top: 30upx;
		margin-right: 42upx;
		text-align: center;
		line-height: 58upx;
	}
	
	.common-box:first-child {
		margin-left: 0;
	}
	
	.common-box:nth-child(4) {
		margin-right: 0;
	}
	
	.common-box.active {
		border: 1px solid rgba(70, 206, 207, 1);
		color: rgba(70, 206, 207, 1);
	}
	.btn{
		margin-top: 60upx;
		margin-bottom: 60upx;
	}
</style>
